<template>
  <div :key="id">
    <ButtonGroup
      :title="`${configKey === 'titleItalic' ? '标题' : '描述'}倾斜`"
      :status="status[currentStatus]"
    >
      <el-button-group>
        <el-button :class="{ select: currentStatus === 0 }" @click="changeItalic(0)">
          <font-awesome-icon icon="italic" />
        </el-button>
        <el-button :class="{ select: currentStatus === 1 }" @click="changeItalic(1)">
          <!-- <font-awesome-icon icon="align-center" /> -->
          <svg
            t="1735548785130"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1520"
            width="14"
            height="14"
            fill="currentcolor"
          >
            <path
              d="M256 64C220.6 64 192 92.6 192 128s28.6 64 64 64h192v640H256c-35.4 0-64 28.6-64 64s28.6 64 64 64h512c35.4 0 64-28.6 64-64s-28.6-64-64-64h-192V192h192c35.4 0 64-28.6 64-64s-28.6-64-64-64H256z"
              p-id="1521"
            />
          </svg>
        </el-button>
      </el-button-group>
    </ButtonGroup>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import ButtonGroup from './ButtonGroup/index.vue';
import type { UpdateStatus, VueComType } from '@/types';

const props = defineProps<{
  currentStatus: number;
  status: string[];
  isShow: boolean;
  configKey: string;
  editCom: VueComType;
  id: string;
}>();

const updateStatus = inject<UpdateStatus>('updateStatus');

function changeItalic(pos: number) {
  if (updateStatus) updateStatus(props.configKey, pos);
}
</script>

<style scoped></style>
